<template>
  <div class="container">
    <div class="top-row">
      <el-page-header :icon="Back" @back="router.back">
        <template #content>
          <span class="text-large font-600 mr-3">新人立减活动</span>
        </template>
      </el-page-header>
      <el-button @click="saveComponentState.visible = true">+ 创建</el-button>
    </div>
    <div class="body">
      <el-table :data="tableData" stripe style="width: 100%" size="large">
        <el-table-column type="index" width="60" label="序号" />
        <el-table-column prop="title" label="活动名称" width="180" />
        <el-table-column prop="startDate" label="开始时间" width="180" />
        <el-table-column prop="endDate" label="结束时间" width="180">
          <template #default="{ row }">{{ row.endDate ?? '-' }}</template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button :link="true" size="small" :icon="Edit" @click="editHandle(scope.row.id)">修改</el-button>
            <el-button :link="true" size="small" :icon="Delete" @click="deleteHandle(scope.row.id)" class="delBut">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <SaveDialog
      title="新人立减"
      v-model:visible="saveComponentState.visible"
      :id="saveComponentState.form.id"
      @query="saveComponentState.query()"
      @save="(callback) => saveComponentState.save(callback)"
      @cancel="saveComponentState.cancel()"
      :width="'55%'"
      class="save-dialog"
    >
      <template #body>
        <el-form ref="classData" :model="saveComponentState.form" class="demo-form-inline" :rules="saveComponentState.rules" label-width="auto">
          <div class="item-box">
            <span class="box-item-title">• 活动信息</span>

            <div class="box-item-content">
              <el-form-item label="活动开始时间：">
                <el-date-picker v-model="saveComponentState.form.startDate" type="datetime" placeholder="选择日期和时间" />
              </el-form-item>
              <el-form-item label="活动结束时间：">
                <el-date-picker v-model="saveComponentState.form.endDate" type="datetime" placeholder="选择日期和时间" />
              </el-form-item>
              <el-form-item label="周期循环：">
                <el-checkbox-group
                  v-model="saveComponentState.form._weeks"
                  @change="(value) => (saveComponentState.form.weeks = value.join(','))"
                  size="small"
                >
                  <el-checkbox label="周一" :value="1" border />
                  <el-checkbox label="周二" :value="2" border />
                  <el-checkbox label="周三" :value="3" border />
                  <el-checkbox label="周四" :value="4" border />
                  <el-checkbox label="周五" :value="5" border />
                  <el-checkbox label="周六" :value="6" border />
                  <el-checkbox label="周日" :value="7" border />
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="活动时段：" prop="name">
                <time-ranges
                  :time-ranges="saveComponentState.form.timeRanges"
                  @change="(timeRangesArr) => (saveComponentState.form.timeRanges = timeRangesArr.join(','))"
                />
              </el-form-item>
            </div>

            <div class="item-box">
              <span class="box-item-title">• 优惠信息</span>
              <div class="box-item-content">
                <el-form-item label="立减金额：" prop="name">
                  <el-input style="width: 200px" v-model="saveComponentState.form.value" placeholder="新客立减金额" />
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
      </template>
    </SaveDialog>
  </div>
</template>

<script setup lang="ts">
import ComponentHat from '@/plugins/type'
import router from '@/router'
import ShopActivityInstance from '@/types/entity/ShopActivityInstance'
import { Back, Delete, Edit } from '@element-plus/icons-vue'
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
const { $store, $API, $modal } = <ComponentHat>getCurrentInstance().proxy
import { useRoute } from 'vue-router'
import SaveDialog from '@/components/save-dialog/index.vue'
import { NewCustomerActivityDTO } from '@/types/param/activity'
import TimeRanges from '@/components/time-ranges/index.vue'
const tableData = ref<ShopActivityInstance[]>([])
// 获取当前路由信息
const route = useRoute()
onMounted(async () => {
  refreshList()
})
// 当点击编辑活动时
const editHandle = (id: number) => {
  saveComponentState.form.id = id
  saveComponentState.visible = true
}
// 点击删除按钮时
const deleteHandle = async (id: number) => {
  const result = await $API.shopActivityInstance.deleteShopActivityInstance(id)
  if (result.success) {
    $modal.msgSuccess('删除活动成功！')
    // 刷新当前页数据
    refreshList()
  } else {
    $modal.msgError('删除活动失败！' + result.message)
  }
}
async function refreshList() {
  const result = await $API.shopActivityInstance.listShopActivityInstanceTypeList(route.query.activityTypeId as string)
  if (result.success) tableData.value = result.data
}
const saveComponentState = reactive({
  rules: {
    // name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
    // sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
  },
  visible: false,
  form: {
    id: null
  } as NewCustomerActivityDTO,
  async query() {
    const selectDishCategoryResult = await $API.shopActivityInstance.getShopActivityInstance(saveComponentState.form.id)
    if (!selectDishCategoryResult.success) {
      $modal.msgError(selectDishCategoryResult.message)
      return false
    }
    Object.assign(saveComponentState.form, selectDishCategoryResult.data)
    // 回显兼容
    saveComponentState.form._weeks = saveComponentState.form.weeks.split(',')?.map((item) => parseInt(item)) ?? []
    return true
  },
  async save(callback: (success: boolean) => void) {
    console.log('提交的内容：', saveComponentState.form)
    const result = await $API.shopActivityInstance.putNewCustomerActivity(this.form)
    // const dishCategorySaveParam = propertiesCopyUtils([saveComponentState.form], new DishCategorySaveParam())
    // const result = await $API.dishCategory.saveDishCategory(dishCategorySaveParam)
    callback(result.success)
    // 将form置空
    if (result.success) {
      this.form = new NewCustomerActivityDTO()
      refreshList()
    }
  },
  cancel() {
    // 将form置空
    this.form = new NewCustomerActivityDTO()
  }
})
// listShopActivityInstanceTypeList
</script>

<style scoped lang="scss">
.container {
  box-sizing: border-box;

  .top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 20px;
    width: 100%;
    height: 50px;
    font-size: 15px;
    border-bottom: 1px solid #f6f6f6;
    background-color: #fff;
  }

  .body {
    padding: 0 20px;
    box-sizing: border-box;
    background-color: #fff;
  }

  .save-dialog {
    .item-box {
      .box-item-title {
        font-size: 16px;
        font-weight: bold;
      }

      .box-item-content {
        margin-top: 20px;
        margin-left: 65px;
      }
    }
  }
}
</style>
